<template>
    <div>
      <a-modal
        v-model:visible="visible"
        title="预览简历"
        width="100%"
        wrapClassName="full-modal"
        @ok="handleOk"
      >
        <iframe ref="pdfCotainer" :src="pdfUrl" width="100%" height="100%"></iframe>
      </a-modal>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref } from "vue";
  import { getStream } from "../utils/request/request";
  
  // modal
  const useModalEffect = () => {
    const visible = ref<boolean>(false);
    const showModal = () => {
      visible.value = true;
    };
    const handleOk = (e: MouseEvent) => {
      console.log(e);
      visible.value = false;
    };
    return {
      visible,
      showModal,
      handleOk,
    };
  };
  
  //预览pdf
  const usePreviewEffect = () => {
    const pdfUrl = ref<string>("");
    const pdfPreview = (resume_url: string) => {
      if (resume_url) {
        getStream(resume_url).then((res) => {
          pdfUrl.value = window.URL.createObjectURL(
            //@ts-ignore
            new Blob([res], { type: "application/pdf;chartset=UTF-8" })
          );
          window.open(pdfUrl.value); // 新窗口打开
        });
      }
    };
    return { pdfUrl, pdfPreview };
  };
  
  export default defineComponent({
    setup() {
      const { visible, showModal, handleOk } = useModalEffect();
      const { pdfUrl, pdfPreview } = usePreviewEffect();
      return {
        visible,
        showModal,
        handleOk,
        pdfUrl,
        pdfPreview,
      };
    },
  });
  </script>
  
  <style lang="less">
  .full-modal {
    .ant-modal {
      max-width: 100%;
      top: 0;
      padding-bottom: 0;
      margin: 0;
    }
    .ant-modal-content {
      display: flex;
      flex-direction: column;
      height: calc(100vh);
    }
    .ant-modal-body {
      flex: 1;
    }
  }
  </style>
  
  